<template>
  <div>
    <el-dialog title="卡位自动通话设置" :visible="dialogVisible" :close-on-click-modal="false" @close="close" width="800px">
     
      <el-form :model="ruleForm" ref="ruleForm" :inline="false" label-width="130px"  class="demo-ruleForm new_form_box">
        <el-form-item label="状态:" prop="state">
            <el-switch v-model="ruleForm.state" :active-value="1" :inactive-value="2" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
            <span class="tip">
              开启后，在系统将按照设置的拨打周期自动拨打电话，该功能仅支持“全网通双卡”设备。
            </span>
        </el-form-item>
       
        <el-form-item label="自动通话周期:" prop="day" >
          <el-input @change="submit($event,'autoCallDays')" type="number" style="width: 100px;" v-model="ruleForm.day" placeholder="周期">
            <span style="line-height:36px" slot="suffix">天</span>
          </el-input>
          <span class="tip">
          设置通话多少天拨打一次电话,每次通话时长1分钟。
          </span>
        </el-form-item>
        <el-form-item label="上次执行日期:" v-if="ruleForm.lastDate " prop="" >
          <span class="tip">
          {{ ruleForm.lastDate }}
          </span>
        </el-form-item>
        <el-form-item label="说明:" v-if="ruleForm.lastDate " prop="" >
          <span class="tip">
          目前该功能为内测阶段，内测期间免费试用，仅支持“全网通双卡”设备。
          </span>
        </el-form-item>
        
        
      </el-form>
      <div class="center" style="margin-top: 15px;">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary"  @click="submitForm()" >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        state:2,// 1启用  2禁用
        day:''
      },
    };
  },
  created() {
   
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      if(data){
        const obj = JSON.parse(data)
        if(typeof obj === 'object' && obj !== null){
          this.ruleForm = {
            ...this.ruleForm,
            ...obj
          }
        }
      }else{
        this.ruleForm = {
           state:2,// 1启用  2禁用
            day:''
        }
      }
    },
    submitForm() {
      if(this.ruleForm.state==1&&!this.ruleForm.day){
        // 开启状态必填周期
        return this.$message.error('请填写自动通话周期！')
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('save',this.ruleForm)
          this.close()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
   
    close() {
      this.resetForm('ruleForm')
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip{
  color: #999;
  margin-left: 10px;
}
</style>
